<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="vanListDiv" @click="btnvanListDiv(item)" v-for="(item, index) in newpifu" :key="index">
      <dl>
        <dt><img v-lazy="item.img" alt=""></dt>
        <dd>
          <b>{{ item.name }}</b>
          <span class="vanListDivSpan">{{ item.state }}</span>
        </dd>
        <dd>
          <p>{{ item.nosocomium }} {{ item.department }}</p>
        </dd>
        <dd>
          <p class="p">接诊率 <b>{{ item.good }}</b>% 好评率 <b>{{ item.Ordertaking
              }}</b>% 问诊量 <b>{{ item.interrogation
              }}</b>% </p>
        </dd>
        <dd>
          <b>{{ item.price }}元&emsp;</b>平均回复:&nbsp;<b>{{ item.recover
            }}小时内</b>
        </dd>
      </dl>
    </div>
  </van-list>


</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from 'vue-router'
import instance from '../../axios/index.ts';
import { useCounterStore } from '../../pinia/index.ts'//引入pinia
const store = useCounterStore()
interface Item {
  img: string;
  name: string;
  state: string;
  nosocomium: string;
  department: string;
  good: string;
  Ordertaking: string;
  interrogation: string;
  price: string;
  recover: string;
}
const loading = ref(false);
const finished = ref(false);
let page = ref(1);//当前页
let pageSize = ref(10);//一页几条
const newpifu = ref<Item[]>([])//皮肤科数据
const router = useRouter()

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  page.value += 1
  setTimeout(() => {
    // 皮肤 
    instance.post('/api/homeall').then((res: { data: { data: Item[]; }; }) => {
      let shuju = res.data.data
      shuju.forEach((item) => {
        if (item.department == '儿科') {
          newpifu.value.push(item)
          let newarr = (newpifu.value.splice(page.value * pageSize.value, 10))
          newpifu.value = [...newarr, ...newpifu.value]
        }
      })
    })
    // 加载状态结束
    loading.value = false;
    // 数据全部加载完成
    if (newpifu.value.length >= 54) {
      finished.value = true;
    }
  }, 1000);
};

// 点击数据 
const btnvanListDiv = (item: Item) => {
  store.data = item
  router.push('/consultationDetails')
};

</script>
<style scoped>
.vanListDiv {
  width: 100%;
  height: 1.3rem;
  border-bottom: 1px solid #f4f6fa;

  dt {
    float: left;
  }

  dd {
    padding-left: 0.6rem;
    padding-top: 0.05rem;

    .vanListDivSpan {
      padding-left: 0.1rem;
    }
  }

  img {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    padding-top: 0.15rem;
  }
}

.p {
  color: #9b9898;

  b {
    color: rgb(16, 132, 220);
  }
}
</style>
